<template>
  <div class="product-box">
    <h1>食物 超级好吃的{{ title }}</h1>
    <p>价格 {{ price }}元</p>
    <p>{{ desc }}</p>
    <p>打印下c - {{ c }}</p>
    <button @click="handleClick">砍价</button>
  </div>
</template>

<script>
export default {
  // 使用方式和data是一样的 props语法 数组是不会校验的
  // props: ["title", "price", "desc", "id"],
  // props使用对象的语法 可以校验
  /**
   * 基本校验 接受的属性名: 类型（js包装类String,Number） 不能写小写 变量了就会报错
   * 多个类型校验 接受的属性名: [类型A，类型B,...]
   * 必填项校验 和 默认值 互斥
   *    接受的属性: {
   *      required: true  // 记住是required 有d这个字母
   *    }
   * 默认值 和 必填项 互斥
   *   接受的属性: {
   *    default: xxx
   *  }
   * （注意 如果还想控制props的类型，可以追加type属性）
   */
  props: {
    title: String,
    price: Number,
    desc: String,
    id: [Number, String], // 字符串或者数字都可以
    a: Number,
    b: {
      required: true, // 必须父传子有b属性
      type: Number,
    },
    c: {
      type: Number, // 默认值提供的type 必须要和默认值的类型一致
      default: 100,
    },
    type: {
      validator(value) {
        // 自定义校验函数 返回true - 校验通过 false - 校验失败
        return ["success", "warning", "danger"].includes(value);
      },
    },
    d: {
      // 对象和数组引用类型 要用工厂函数获取
      // default: () => ({}),
      // default: function () {
      //   return {};
      // },
      default: () => [],
    },
  },
  methods: {
    handleClick() {
      console.log(this.price);
      // 单向数据流 - props只读 下面的代码是错误演示，千万不要这么用
      // this.price = this.price - 10;
      // 子传父标准写法，通知父组件 事件名 参数1，参数2，参数3
      this.$emit("killPrice", this.id, "a", "b", "c", true);
    },
  },
};
</script>

<style scoped lang="less">
.product-box {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  transition: 0.5s;
  &:hover {
    box-shadow: 2px 2px 2px 2px;
    transform: translateY(-5px);
  }
}
</style>